30 天影集播放清單 https://www.youtube.com/playlist?list=PLBd8JGCAcUAEFJzjAQC6DbWTeDICcanFF

啊，我的臉怎麼那麼黑 orz

Youtube 連結：https://www.youtube.com/watch?v=2Y9SDWoGQgg

大家好，我是菜市場阿龍。

一年一度的鐵人賽又來了，這個比賽充滿了挑戰，但同時也充滿了樂趣，讓我有機會不斷提升技術。每當比賽結束後，我都會告訴自己，明年不再參加，有更重要的事情要做。但是，當下一年的比賽報名開始時，我的內心又不由自主地點擊了報名按鈕。

這次的鐵人賽主題是 Vite 的原始碼解讀。

為什麼選擇這個主題呢？原因是我在今年八月份參加了 {LaravelxVue}Conf，在研討會上分享的主題是「被 Vue 框架所耽誤的建置工具：Vite」，可惜只有短短的三、四十分鐘的時間，無法深入探討 Vite 的內部運作。所以我決定在這個鐵人賽中，分期付款地慢慢深入研究 Vite 的原始碼，看看我能發現什麼有趣的東西，並與大家分享。

我之前大部分時間都在寫 Ruby/Rails 的專案，但 Rails 的前端打包策略一直在不斷調整，從 Assets Pipeline 到 Webpack，再到 Rails 7 的 Importmap。對於前端生態，各種全棧型的框架都有自己的做法，但似乎沒有真正完美的整合方式。直到我聽說了 Vite，一個由 Vue 的作者開發的工具，最初我以為它只是 Vue 社群的東西，但後來發現它可以適用於各種 JavaScript 專案，甚至是 React。這讓我對 Vite 產生了更大的興趣。

Vite 不同於傳統的打包工具，它不需要預先打包所有資源，而是根據需要動態載入，因此速度非常快。它的開發者巧妙地將打包的工作分給了 esbuild 和 rollup 這兩個優秀的工具，Vite 自身則充當開發伺服器的角色，實現了極速的開發體驗。這使得 Vite 在前端開發中非常有幫助，讓開發者能夠更快速地開始編寫代碼。

所以我決定深入研究 Vite 的原始碼，因為我認為它是一個非常有趣且有潛力的工具。閱讀原始碼的過程並不需要每一行都理解，有時只需瞭解一部分就足夠了。在這個過程中，我會使用 VSCode 以及一些方便的插件來追原始碼。

總結來說，Vite 誕生在對的時代，利用原生資源，實現了快速的開發體驗。它不僅讓前端開發更加高效，還提供了一個優秀的開發者體驗。希望這個系列文章能幫助你更好地利用 Vite 進行前端開發，提高開發效率。

在這個系列影片中，我們將繼續研究 Vite 的原始碼，希望可以更全面地了解 Vite 的運作原理。歡迎訂閱我的 Youtube 頻道，我們下集見！